<template>
	<div class="home">
		<!-- 顶部状态栏 -->
		<div class="top" v-if="option1.length">
			<van-dropdown-menu>
				<van-dropdown-item v-model="value" :options="option1" :onchange="goBoundCell()" />
			</van-dropdown-menu>
		</div>
		<div class="top" v-else="option1.length" :title="title">
			<van-icon name="home-o" size="20px" />
			<span @click="goCommunityName()">{{communityName}}</span>
			<van-icon name="arrow" size="20px" />
		</div>
		<van-swipe :autoplay="3000">
			<van-swipe-item class="guanggao" v-for="(item,index) of imgList" :key="index">
				<img :src="item" alt="">
			</van-swipe-item>
		</van-swipe>
		<!-- 到家安全 -->
		<div class="middle">
			<div class="title">到家安全</div>
			<ul>
				<a href="tel://888">
					<li>
						<div class="left">
							<img src="../assets/img/img2/v2_pxjzbq.png" alt="">
						</div>
						<div class="right">
							<div class="name">一键报警</div>
							<div class="describe">危难时刻,迅速报警</div>
						</div>
					</li>
				</a>
				<li @click="goPhoneKey()">
					<div class="left">
						<img src="../assets/img/img2/v2_pxk3vi.png" alt="">
					</div>
					<div class="right">
						<div class="name">手机开门</div>
						<div class="describe">绑定楼层,轻松开门</div>
					</div>
				</li>
				<li @click="goEnter()">
					<div class="left">
						<img src="../assets/img/img2/v2_pydb9y.png" alt="">
					</div>
					<div class="right">
						<div class="name">人脸开门</div>
						<div class="describe">绑定人脸,轻松开门</div>
						<div class="state">
							<!-- <span>{{haveFace}}</span> -->
						</div>
					</div>
				</li>
			</ul>
		</div>

		<!-- 物业支付 -->
		<div class="middle bottom">
			<div class="title">物业支付</div>
			<ul>
				<li @click="goProperty">
					<div class="left">
						<img src="../assets/img/img2/v2_pxk3t5.png" alt="">
					</div>
					<div class="right">
						<div class="name">物业缴费</div>
						<div class="describe">在线缴纳物业费</div>
					</div>
				</li>
				<li @click="goLiving">
					<div class="left">
						<img src="../assets/img/img2/v2_pxk40t.png" alt="">
					</div>
					<div class="right">
						<div class="name">生活缴费</div>
						<div class="describe">水费电费,轻松缴纳</div>
					</div>
				</li>
			</ul>
		</div>


		<!-- 
			使用一个自定义组件
			1.使用属性的方式向子组件传递参数,如果属性的值是一个变量,就要在属性名前加v-bind或者冒号,属性名称有两种格式,驼峰或者短横线
			2.使用事件的方式接收子组件传上来的消息,事件监听函数的默认参数就是消息的内容
		-->
		<!-- <HelloWorld :msg="msg" :goodsMsg="msg1" :bad-msg="msg2" @fromSon="changeMsg" /> -->





	</div>
</template>

<script>
	import { DropdownMenu, DropdownItem } from 'vant';
	import { Toast } from "vant"
	import { mapMutations, mapState } from 'vuex'
	import { Swipe, SwipeItem, Icon } from 'vant'

	export default {
		// 当前组件的名称
		name: 'home',

		data() {
			return {
				communityName: "",
				imgList: [require('../assets/img/img2/v2_pz17fx.png'), require('../assets/img/img2/v2_pz17fq.png'), require('../assets/img/img2/v2_pz17fi.png')],
				option1: [],
				value: 12,
				equipment_name: "",
				title: "",
				text: "",
				comm_id: "",
				haveFace:"已录入人脸"
			}
		},

		// 在当前组件中添加其他的自定义组件
		components: {

		},

		/*
			在computed中添加mapState
			如果computed中只有一个辅助函数，后面可以直接写成函数名
		*/
		computed: {
			...mapState(['token', 'userInfo', 'userid', "homeId"]), // this.token相当于this.$store.state.token

		},
		methods: {
			...mapMutations(['changehomeId']),
			goBoundCell() {
				console.log(this.value)
				if (this.value == 999999) {
					this.$router.push(
						{
							name: 'boundCell'
						}
					)
				} else {
					this.changehomeId(this.value)
				}
			},
			goProperty() {
				// Toast("请打开云闪付支付!")
				// return
				this.$router.push(
					{
						name: 'property'
					}
				)
			},
			getCommunityList() {
				this.$axios.get('/comm/getuser/commlist', {
					params: {
						user_id: this.userid
					}
				}).then((res) => {
					//console.log(res);
					let { message, data, status } = res;
					console.log(res)
					if (status == 200 && data.length == 0) {
						// Toast("请先绑定小区")
						this.communityName = "绑定小区"
					} else {
						let arr = []

						this.value = data[0].id
						for (let i = 0; i < data.length; i++) {
							var obj = {};
							obj.text = data[i].comm_name + data[i].buil_name + data[i].unit_name
							obj.value = data[i].id
							obj.equipment_name = data[i].equipment_name
							obj.comm_id = data[i].comm_id
							arr.push(obj)
						}
						var obj1 = {};
						obj1.text = "绑定小区";
						obj1.value = 999999
						arr.push(obj1)
						this.option1 = arr
						if (this.homeId == "") {
							this.value = data[0].id
						} else {

							this.value = this.homeId
						}

					}
				})
			},
			goLiving() {
				// Toast("请打开云闪付支付!")
				// window.location.href = "anpingbao://map"
				// window.location.href="baibai://"
				// return
				// this.$router.push(
				// 	{
				// 		name: 'a'
				// 	}
				// )
			},

			goPhoneKey() {
				Toast("开发中!")
				return
				this.$router.push(
					{
						name: 'phoneKey'
					}
				)
			},
			goEnter() {
				if (this.option1.length == 0) {
					Toast("请先绑定小区")
					this.$router.push(
						{
							name: 'boundCell'
						},
					)
				} else {

					let equipment_name = ""
					for (var i = 0; i < this.option1.length; i++) {
						if (this.value == this.option1[i].value) {
							equipment_name = this.option1[i].equipment_name
							const comm_id = this.option1[i].comm_id
							console.log("comm_id", comm_id)
							this.$router.push(
								{
									name: 'enter',
									params: {
										isDuodu: equipment_name,
										comm_id: comm_id
									},
								},
							)
						}

					}
				}

			},
			goCommunityName() {
				this.$router.push(
					{
						name: 'boundCell'
					}
				)
			}

		},
		// 生命周期函数,创建实例,可以获取this,但DOM节点还没有创建出来
		created() {
			this.getCommunityList()
		},
		// 生命周期函数,当前组件上的所有DOM节点都已经创建出来
		mounted() {

		

		},
		// 生命周期函数,当数据发生改变并且导致视图发生相应的改变
		updated() {
			// console.log('updated')

		},
		// 生命周期函数,组件被销毁
		destroyed() {
			//console.log('destroyed')
		},
		// 生命周期函数,进入缓存组件
		activated() {
			//console.log('activated')

			// 再次回来的时候,直接滚动到之前离开时候保存的位置


			// 如果每次进入缓存组件的时候，需要实时更新当前组件中的内容，可以将这些更新代码写在activated

			// 请求获取用户信息
			// this.reqUserInfo()
			// this.$store.dispatch('changeUserInfo2')

		},
		// 生命周期函数,离开缓存组件
		deactivated() {
			//console.log('deactivated')

			// 不要尝试去获取页面的scrollTop,因为页面只有一个,跳转到新的路由,页面的scrollTop会变成0
			// 所以,在离开的时候,把当前组件的scrollTop保存下来,赋给一个新的变量
			// this.cache_scrollTop = this.scrollTop
		},
		// 离开路由之前,它会在deactivated之前调用
		beforeRouteLeave(to, from, next) {

			//console.log('beforeRouteLeave')

			// 1.获取页面的scrollTop,赋给一个新的变量
			// this.cache_scrollTop = document.documentElement.scrollTop || document.body.scrollTop

			// 2.获取顶部状态栏距离父元素底部的距离,赋给一个新的变量


			// 必须调用next,否则就不会离开当前路由
			next()
		}
	}
</script>

<!-- 添加scoped属性,将样式的作用域限制在当前组件内,不会影响子组件 -->
<style lang="scss" scoped>
	.home {
		padding: 40px 0 50px 0;
		/* height: 100vh; */
		overflow: hidden;
		/* overflow: hidden; */
	}

	.van-dropdown-menu {
		height: 40px !important;
	}

	h1 {
		color: green !important;
	}

	.top {
		/* margin: 6px 0; */
		width: 100%;
		height: 40px;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: .4rem;
		left: 0;
		top: 0;
		z-index: 999;
		background-color: white;

	}

	.guanggao {
		width: 100%;
		/* border-top: 1px solid #666; */
		/* padding-top: 2px; */
		height: 3.2rem;
	}

	.guanggao img {
		width: 100%;
		/* border-top: 1px solid #666; */
		/* padding-top: 2px; */
		height: 3.2rem;
	}

	.top span {
		margin: 0;
	}

	.middle {
		width: 100%;
		padding-top: 4px;
		border-top: 1px solid #666;
		/* border-bottom: 1px solid #666; */
	}

	.bottom ul {
		padding-bottom: 0;
	}

	.middle .title {
		height: .44rem;
		color: rgba(16, 16, 16, 1);
		font-size: .4rem;
		margin-left: 15px;
		font-family: SourceHanSansSC-bold;
		font-weight: 900;
	}

	.middle ul {
		width: 95%;
		margin: 3px auto;
	}

	.middle ul li {
		display: flex;
		justify-content: space-between;

	}

	.middle ul li .left {
		width: 20%;
		margin-right: 10px;
	}

	.middle ul li .left img {
		width: 1.2rem;
		height: 1.2rem;
	}

	.middle ul li .right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: .16rem 0;
		border-bottom: 1px solid #999;
		position: relative;
	}

	.name {
		color: rgba(16, 16, 16, 1);
		font-size: .28rem;
		text-align: left;
		font-family: SourceHanSansSC-regular;
		font-weight: 900;
	}

	.state {
		color: #999;
		position: absolute;
		right: .2rem;
		bottom: 0;
	}

	.describe {
		color: #000;
		font-size: .28rem;
	}

	/* #a{
		width: 100px;
		height: 100px;
	} */
</style>